<%@ page contentType="text/html; charset=utf-8" language="java"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="./css/validationEngine.jquery.css" type="text/css"/>
<style type="text/css">
body{
margin:0;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
line-height:175%;
}
</style>
</head>

<body>
<!--
<div id="floater" style="border:solid green 1px;left: 490px; top: 245px; position:absolute;z-index:998;background: url(../images/iframe_bgpic.gif) no-repeat 0px 0px">
		<div style="left:0; top:0;right:0;bottom:0;position:absolute;z-index:999;border:solid green 1px">
			<font color='red'>请在需填写审批意见的项后面带&nbsp;“<img src="../images/ico_button.gif" />”&nbsp;标记后填写意见</font>
			<button class="btn_input" onClick="hiddenDiv();">关闭</button>					      
		</div>
</div>
-->


<div>
<input type="text" name="model.projectName" size="25" id="projectName" />
				<img class="hiddenImg" id="projectName_Img"
					src="../images/ico_button.gif" width="11" height="11" onclick="show_float_div(event);" />
浮动div层
<div id="floater" style="display:none;position:absolute;z-index:1;background:#fff">
	<font color='red'>&nbsp;&nbsp;提示错误的消息！</font>
</div>
</div>
<br/><hr/><br/>
<label>
		<span>Field is required : </span>
		<input value="" type="text" name="req" onkeyup="show_float_div2(this);" id="req" />
	</label>
	<div id="form_div" class="reqformError parentFormformID formError" style="top83;left:113;display:block;margin-top: 0px; opacity: 0.87;">
		<div class="formErrorContent">
		* This field is required
		<br>
		</div>
		<div class="formErrorArrow">
			<div class="line10"></div>
			<div class="line9"></div>
			<div class="line8"></div>
			<div class="line7"></div>
			<div class="line6"></div>
			<div class="line5"></div>
			<div class="line4"></div>
			<div class="line3"></div>
			<div class="line2"></div>
			<div class="line1"></div>
		</div>
	</div>
<script type="text/javascript">
function show_float_div(event){   //id
	document.getElementById("floater").style.left = event.clientX;
	document.getElementById("floater").style.top = event.clientY;
	document.getElementById("floater").style.display = "block";      //把上面拼出的div显示出来
	window.setTimeout(escKeyDown,1000);
}
function show_float_div2(dom){   //id

	var x = dom.getBoundingClientRect().left;
    var y = dom.getBoundingClientRect().top + dom.scrollTop;
    alert(x+"\n"+y);
	document.getElementById("form_div").style.left =113;
	document.getElementById("form_div").style.top =83;
	document.getElementById("form_div").style.display = "block";      //把上面拼出的div显示出来
	window.setTimeout(escKeyDown,1000);
}

//按Esc键隐藏div
function escKeyDown(event){
	document.getElementById("floater").style.display="none";
	document.getElementById("form_div").style.display="none";	
}
</script>
<script type="text/javascript">
function getElementPos(elementId) {
 var ua = navigator.userAgent.toLowerCase();
 var isOpera = (ua.indexOf('opera') != -1);
 var isIE = (ua.indexOf('msie') != -1 && !isOpera); // not opera spoof
 var el = document.getElementById(elementId);
 if(el.parentNode === null || el.style.display == 'none') {
  return false;
 }      
 var parent = null;
 var pos = [];     
 var box;     
 if(el.getBoundingClientRect)    //IE
 {         
  box = el.getBoundingClientRect();
  var scrollTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
  var scrollLeft = Math.max(document.documentElement.scrollLeft, document.body.scrollLeft);
  return {x:box.left + scrollLeft, y:box.top + scrollTop};
 }else if(document.getBoxObjectFor)    // gecko    
 {
  box = document.getBoxObjectFor(el); 
  var borderLeft = (el.style.borderLeftWidth)?parseInt(el.style.borderLeftWidth):0; 
  var borderTop = (el.style.borderTopWidth)?parseInt(el.style.borderTopWidth):0; 
  pos = [box.x - borderLeft, box.y - borderTop];
 } else    // safari & opera    
 {
  pos = [el.offsetLeft, el.offsetTop];  
  parent = el.offsetParent;     
  if (parent != el) { 
   while (parent) {  
    pos[0] += parent.offsetLeft; 
    pos[1] += parent.offsetTop; 
    parent = parent.offsetParent;
   }  
  }   
  if (ua.indexOf('opera') != -1 || ( ua.indexOf('safari') != -1 && el.style.position == 'absolute' )) { 
   pos[0] -= document.body.offsetLeft;
   pos[1] -= document.body.offsetTop;         
  }    
 }              
 if (el.parentNode) { 
    parent = el.parentNode;
   } else {
    parent = null;
   }
 while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML') { // account for any scrolled ancestors
  pos[0] -= parent.scrollLeft;
  pos[1] -= parent.scrollTop;
  if (parent.parentNode) {
   parent = parent.parentNode;
  } else {
   parent = null;
  }
 }
 return {x:pos[0], y:pos[1]};
}


</script>

</body>
</html>
